<template>
  <div>
    <van-overlay
      :show="props.open"
      :lock-scroll="false"
      z-index="100"
      class="flex justify-center items-center w-full"
    >
      <div
        class="bg-[#1a2c38] text-white p-4 rounded-lg max-w-[500px] w-full max-h-120 overflow-auto"
      >
        <div class="flex justify-between items-center mb-4">
          <div class="text-base font-bold flex items-center">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="设置"
            />
            {{ $t("page.lucky.record") }}
          </div>
          <button class="text-gray-400 hover:text-gray-200" @click="close">
            <svg-icon
              class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
              name="关闭"
            />
          </button>
        </div>
        <table class="w-full text-left bg-[#213743] table-fixed">
          <thead class="w-full bg-[#1a2c38] text-[#fff] text-lg">
            <tr class="flex">
              <th class="p-4 text-left lg:text-center flex-1">
                {{ $t("page.wheel.draw") }}
              </th>
              <th class="p-4 text-center lg:table-cell flex-1">
                {{ $t("page.wheel.value") }}
              </th>
              <th class="p-4 text-right lg:text-center flex-1">
                {{ $t("page.wheel.prize") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="text-[#b1bad3] flex"
              :style="{ backgroundColor: i % 2 === 0 ? '#213743' : '#1a2c38' }"
              v-for="(item, i) in tableData"
              :key="i"
            >
              <td
                class="p-4 text-left lg:text-center text-white font-semibold truncate text-sm flex-1"
              >
                {{ item.prize }}
              </td>
              <td class="p-4 text-center lg:table-cell truncate text-sm flex-1">
                - {{ item.lucky_value }}
              </td>
              <td class="p-4 text-right lg:text-center truncate text-sm flex-1">
                <el-tooltip :content="setPrizes(item.prizes_type, item.prizes)">
                  {{ setPrizes(item.prizes_type, item.prizes) }}
                </el-tooltip>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
defineOptions({
  name: "recordDialog"
});
import { ref, onMounted, getCurrentInstance, watch } from "vue";

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits();

const tableData = ref([]);

const handleSelectionChange = val => {
  console.log(val);
};

const close = () => {
  emit("close");
};
import { activeWheelRecord } from "@/api/active";
const setPrizes = (type, value) => {
  const obj = {
    luck: `${globalProperties
      .$t("page.lucky.lucky_value")
      .replace("*", value)}`,
    again: `${globalProperties.$t("page.lucky.again")}`,
    coins: `${globalProperties
      .$t("page.lucky.coins_value")
      .replace("*", value)}`,
    none: `${globalProperties.$t("page.lucky.none")}`
  };
  return obj[type];
};

onMounted(() => {
  loadData();
});

// 分页
const pageData = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const typeMap = {
  silver: globalProperties.$t("page.wheel.silver"),
  prime: globalProperties.$t("page.wheel.prime"),
  diamond: globalProperties.$t("page.wheel.diamond")
};

const loadData = () => {
  const params = {
    is_my: 1,
    page: pageData.value.page,
    page_size: pageData.value.page_size
  };
  activeWheelRecord(params).then(res => {
    console.log(res);
    tableData.value = res.data.list.map(item => {
      return {
        ...item,
        prize: typeMap[item.title],
        type: typeMap[item.type]
      };
    });
  });
};

watch(
  () => props.open,
  newVal => {
    if (newVal) {
      loadData();
    }
  }
);
</script>

<style scoped lang="less">
@media (max-width: 750px) {
}

@media (max-width: 640px) {
}
</style>
